<template>
	<view>
		<u-navbar title="我的设置" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="img">
				<img class='logo' src="http://182.61.31.180:5000/images/1654616926560_1654614364423_logo.png">
			</view>
			<view class="topBox">
				<view class='person' @click="goperson">

					<span>个人信息</span>
					<u-icon name="arrow-right"></u-icon>
				</view>

				<view class='address' @click="goaddress">

					<span>我的收货地址</span>
					<u-icon name="arrow-right"></u-icon>
				</view>

				<view class='contact' @click="gocontact">

					<span>联系客服</span>
					<u-icon name="arrow-right"></u-icon>

				</view>
				<view class='cprequest' @click="goproduct">

					<span>产品反馈</span>
					<u-icon name="arrow-right"></u-icon>

				</view>
				<view class='updpwd' @click="goupdpwd">

					<span>修改密码</span>
					<u-icon name="arrow-right"></u-icon>

				</view>
				<view class='about' @click="goabout">

					<span>关于书多多</span>
					<u-icon name="arrow-right"></u-icon>

				</view>

			</view>
			<view class='exit'>
				<button @click="logOut">退出</button>
			</view>
		</view>
		<u-modal :show="showModal" :showConfirmButton="false">
			<view class="BigBox">
				<textarea placeholder="在此写上您的宝贵意见..."></textarea>
				<view class="button">
					<u-button @click="cancel" text="取消"></u-button>
					<u-button type="primary" @click="confirm" text="提交"></u-button>
				</view>
			</view>
		</u-modal>
	</view>

</template>

<script>
export default {
	data() {
		return {
			// url:'https://uniapp.dcloud.io/',
			showModal: false,
		}
	},
	methods: {
		goaddress() {
			this.$store.dispatch('getAddress').then(res => {
				if (res == 'success') {
					this.$Router.push({
						name: 'address'
					})
				} else {
					this.$tools.toast('网络错误')
				}
			})
		},
		checkApp() {
			if (plus.runtime.isApplicationExist({ pname: 'com.tencent.mobileqq' })) {
				this.$tools.toast('正在跳转到qq客服页面')
				return true;
			} else {
				this.$tools.toast("您的手机上未安装qq")
				return false;
			}
		},
		gocontact() {
			if (this.checkApp())
				plus.runtime.openURL('mqq://im/chat?chat_type=wpa&uin=' + '473475792' + '&version=1&src_type=web ');
		},
		goproduct() {
			this.showModal = true;
		},
		goupdpwd() {
			this.$Router.push({
				name: 'updpwd'
			})
		},
		goabout() {
			this.$Router.push({
				name: 'about'
			})
		},
		logOut() {

			this.$Router.replaceAll({
				name: 'login'
			})
		},
		goperson() {
			this.$Router.push({
				name: 'person'
			})
		},
		cancel() {
			this.showModal = false;
		},
		confirm() {
			this.showModal = false;
		}
	}

}
</script>

<style lang='scss' scoped>
.main {
	height: 100%;
	width: 100%;

	.topBox {
		height: 20rem;
		background: white;
		margin: 2rem 1rem 0 1rem;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-direction: column;
		border-radius: 1rem;

		.address {
			line-height: 3rem;
			height: 3rem;

			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 0.5px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
			/* background-color: red; */
		}

		.contact {
			line-height: 3rem;
			height: 3rem;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
		}

		.person {
			line-height: 3rem;
			height: 3rem;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
		}

		.cprequest {
			line-height: 3rem;
			height: 3rem;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
		}

		.updpwd {
			line-height: 3rem;
			height: 3rem;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
		}

		.about {
			line-height: 3rem;
			height: 3rem;
			width: 90%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.2rem;
			font-size: 1.2rem;
		}

	}

	.exit {

		margin: 3rem auto;

		button {
			border-radius: 1rem;
			width: 10rem;
			border: none;
		}

		/* justify-content: center; */
	}

	.img {
		width: 100%;
		display: flex;
		justify-content: center;

		.logo {
			border-radius: 2rem;
			width: 80%;
			margin-top: 2rem;

		}
	}
}

.BigBox {
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	textarea {
		border: 1px solid #ccc;
		border-radius: 0.5rem;
		padding: 1rem;
		height: 10rem;
	}

	.button {
		width: 100%;
		margin-top: 1rem;
		display: flex;
		justify-content: space-around;

		.u-button {
			width: 5rem;
		}
	}
}
</style>